<template>
  <div style="min-height: calc(100vh - 340px)">
    <div
      class="bg w-full h-[180px] grid justify-items-center content-center gap-[20px] relative"
    >
      <div
        style="
          border-radius: 50%;
          height: 90px;
          color: #fff;
          text-align: center;
          font-weight: bold;
          font-size: 42px;
          line-height: 90px;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        "
      >
        {{ jifen }}
      </div>
      <span class="text-[#fff]">当前积分</span>

      <div
        class="absolute top-[20px] right-[20px] text-center cursor-pointer"
        style="
          width: 70px;
          height: 24px;
          line-height: 24px;
          background: #ffffff;
          border-radius: 4px;
          color: #f88214;
        "
        @click="open"
      >
        积分明细
      </div>
    </div>

    <div class="text-center mt-[-20px] flex justify-center">
      <div
        @click="sign"
        style="
          width: 120px;
          height: 40px;
          background: linear-gradient(
            90deg,
            #f8d39d 0%,
            #ffe5c4 51%,
            #f6c283 100%
          );
          border-radius: 8px;
          font-weight: bold;
          font-size: 18px;
          color: #9a5d34;
          line-height: 40px;
          text-align: center;
          z-index: 2;
        "
      >
        签到
      </div>
    </div>
    <div class="flex items-center gap-[6px] mt-[20px] py-[10px]">
      <div class="h-[16px] w-[4px] bg-[#F43107] rounded-[10px]"></div>
      <span>积分任务</span>
    </div>
    <div style="border-bottom: 1px solid #ddd" class="w-full"></div>

    <a-row :gutter="15" class="mt-[20px]">
      <a-col :span="8">
        <div
          class="w-full flex justify-between items-center p-[15px] bg-[#F8F8F8]"
        >
          <div class="flex gap-[12px] relative">
            <img src="@/assets/img/work/give-1.png" height="50" width="50" />
            <div class="grid gap-[0px]">
              <span style="font-weight: bold; color: #333333"
                >邀请好友注册</span
              >
              <span style="font-size: 12px; color: #a9b1be"
                >发送邀请给好友完成注册各得200积分</span
              >
            </div>

            <div
              class="absolute left-[160px] top-[0px]"
              style="font-weight: bold; color: #ff4848"
            >
              +{{ config?.inviting_reg || 0 }}积分
            </div>
          </div>
          <div
            style="
              width: 80px;
              height: 30px;
              background: #f5dcb2;
              border-radius: 4px;

              font-size: 16px;
              color: #9a5d34;
              line-height: 30px;
              text-align: center;
            "
            @click="welcome"
          >
            去邀请
          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div
          class="w-full flex justify-between items-center p-[15px] bg-[#F8F8F8]"
        >
          <div class="flex gap-[12px] relative">
            <img src="@/assets/img/work/give-2.png" height="50" width="50" />
            <div class="grid gap-[0px]">
              <span style="font-weight: bold; color: #333333"
                >首次绑定邮箱</span
              >
              <span style="font-size: 12px; color: #a9b1be"
                >填写正确的邮箱地址并完成邮箱验证</span
              >
            </div>

            <div
              class="absolute left-[160px] top-[0px]"
              style="font-weight: bold; color: #ff4848"
            >
              +{{ config?.bind_email || 0 }}积分
            </div>
          </div>
          <div
            style="
              width: 80px;
              height: 30px;
              background: #fff;
              border-radius: 4px;
              border: 1px solid #6675ff;

              font-size: 16px;
              color: #6675ff;
              line-height: 30px;
              text-align: center;
            "
            @click="jump(2)"
          >
            去绑定
          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div
          class="w-full flex justify-between items-center p-[15px] bg-[#F8F8F8]"
        >
          <div class="flex gap-[12px] relative">
            <img src="@/assets/img/work/give-3.png" height="50" width="50" />
            <div class="grid gap-[0px]">
              <span style="font-weight: bold; color: #333333"
                >填写公司信息</span
              >
              <span style="font-size: 12px; color: #a9b1be"
                >首次完成公司信息填写可获得</span
              >
            </div>

            <div
              class="absolute left-[160px] top-[0px]"
              style="font-weight: bold; color: #ff4848"
            >
              +{{ config?.fill_in_company || 0 }}积分
            </div>
          </div>
          <div
            style="
              width: 80px;
              height: 30px;
              background: #fff;
              border-radius: 4px;
              border: 1px solid #6675ff;
              color: #6675ff;

              font-size: 16px;
              line-height: 30px;
              text-align: center;
            "
            @click="jump(3)"
          >
            去填写
          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div
          class="w-full flex justify-between items-center p-[15px] bg-[#F8F8F8] relative mt-[20px]"
        >
          <div class="flex gap-[12px]">
            <img src="@/assets/img/work/give-4.png" height="50" width="50" />
            <div class="grid gap-[0px]">
              <span style="font-weight: bold; color: #333333">新用户注册</span>
              <span style="font-size: 12px; color: #a9b1be"
                >手机号快速完成注册</span
              >
            </div>
          </div>
          <div
            class="absolute left-[170px] top-[15px]"
            style="font-weight: bold; color: #ff4848"
          >
            +{{ config?.new_user_reg || 0 }}积分
          </div>
          <div
            style="
              width: 80px;
              height: 30px;
              background: #eee;
              border-radius: 4px;

              font-size: 16px;
              color: #a9b1be;
              line-height: 30px;
              text-align: center;
            "
          >
            已完成
          </div>
        </div>
      </a-col>
    </a-row>

    <a-modal
      v-model:open="storeDetailVisible"
      title="积分明细"
      @ok="handleOk"
      :footer="null"
    >
      <a-tabs v-model:activeKey="selctedOne">
        <a-tab-pane key="0" tab="全部"></a-tab-pane>
        <a-tab-pane key="1" tab="积分获取" force-render></a-tab-pane>
        <a-tab-pane key="2" tab="积分消耗"></a-tab-pane>
      </a-tabs>

      <div>
        <div
          v-for="item in dataSource"
          :key="item.id"
          class="flex"
          style="margin-bottom: 20px"
        >
          <div class="w-[300px]">
            {{ getDate(item.createtime) }}
          </div>

          <div class="ml-[12px] w-[120px]">
            {{
              item.platform_status == "1"
                ? "pc端"
                : item.platform_status == "2"
                ? "小程序"
                : "H5"
            }}
          </div>

          <div class="ml-[12px] w-[350px]">
            {{ typeJson?.[item.type_status] || "--" }}
          </div>

          <div
            class="ml-[12px] w-[50px]"
            :style="{ color: item?.change_status == 1 ? '#bc4d22' : '' }"
          >
            {{ item?.change_status == 1 ? "+" : "-" }}{{ item.inttegral_num }}
          </div>
        </div>
      </div>

      <a-pagination
        v-if="page.total > 0"
        v-model:current="page.current"
        :total="page.total"
        show-less-items
        @change="onChange"
      />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { Modal, message } from "ant-design-vue";
import { onMounted, watch } from "vue";
import {
  Staginguserinvitation_key,
  integralsallocation,
  integralsisEnabled,
  tabulation,
  todaySign,
} from "../../../../Api/work";
import { useUserStore } from "../../../../stores/menuStore";
import { useRouter } from "vue-router";
const store = useUserStore();
const typeJson = {
  1: "签到",
  2: "邀请好友注册",
  3: "首次绑定邮箱",
  4: "填写公司信息",
  5: "新用户注册",
  6: "查看标讯",
  7: "查看联系人",
  8: "查看公司",
};
const getDate = (timestamp) => {
  let date = new Date(timestamp * 1000); // 注意：JavaScript的Date对象需要毫秒为单位的时间戳，因此我们需要乘以1000

  let year = date.getFullYear();
  let month = date.getMonth() + 1; // getMonth() 是从0开始的，所以需要+1
  let day = date.getDate();

  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  // 如果需要补零
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const jifen = computed(() => {
  const jifen = Number(store.user?.jifen || 0)

  return jifen>10000 ? (jifen/10000).toFixed(2)+'万' : jifen

});
const storeDetailVisible = ref(false);
const selctedOne = ref("0");
const router = useRouter();
const jump = (key) => {
  router.push(`/setup?key=${key}`);
};

const page = reactive({
  current: 1,
  total: 0,
  size: 10,
});
const dataSource = ref([]);
const getData = async () => {
  const params = {
    change_status: selctedOne.value,
    page: page.current,
    limit: page.size,
  };

  const res = await tabulation(params);
  dataSource.value = res.data.data?.list;
  page.total = res.data.data?.count;
};

const onChange = (params) => {
  getData();
};

const welcome = async () => {
  const res = await Staginguserinvitation_key();
const invitation_key = res?.data?.data?.invitation_key||'--'
  Modal.confirm({
    title: "邀请好友",
    icon: null,
    content: "邀请码: " + invitation_key,
    okText: "复制",
    cancelText: "取消",
    onOk: () => {
      navigator.clipboard
        .writeText(invitation_key)
        .then(() => {
          message.success("复制成功");
        })
        .catch((err) => {
          // 这可能是因为用户拒绝了剪贴板权限，或者浏览器不支持这个功能
          console.error("复制失败: ", err);
        });
    },
  });
};

watch(
  () => selctedOne.value,
  () => {
    page.current = 1;
    getData();
  }
);

const sign = async () => {
  if (isEnable.value == 2) {
    message.info("积分未开启");
    return;
  }

  const res = await todaySign();
  if (res?.data?.code == 1) {
    message.success("操作成功");
    store.setUser()
  } else {
    message.error(res?.data?.msg);
  }
};

const isEnable = ref(1);
const config = ref({});

const open = () => {
  storeDetailVisible.value = true;
  getData();
};

const before = async () => {
  const res = await integralsisEnabled();
  isEnable.value = res?.data?.data;

  const res2 = await integralsallocation();
  config.value = res2?.data?.data;
};
onMounted(() => {
  before();
});
</script>

<style lang="scss" scoped>
.bg {
  background: url(@/assets/img/work/asset-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.item-selected {
  background: #fffbf4;
  border-radius: 4px;
  border: 1px solid #f9b430;
}
.item {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  cursor: pointer;
}
</style>
